@import "@/ui/style/mixin.less";

@radius-value: 6px;

@main-w: 1160px;

@page-pt-without-switchnet-tabs: 40px;

/* pt + h + pb*/
@page-header__tabs-h: 30px + 30px + 30px;
@page-header__title-h: 24px;

@page-header-h: @page-header__tabs-h + @page-header__title-h;
@page-header-h-without-tabs: @page-header-h - @page-header__tabs-h;
@page-header-bottom-offset: 20px;

@tools-h: 48px;
@table-mt: 20px;
@table-header-h: 48px;

@sticky-top-height-common: @page-header__title-h + @page-header-bottom-offset + @tools-h + @table-mt + @table-header-h;
// value of `@sticky-top-height-without-tabs` is 200px
@sticky-top-height-without-tabs: @page-pt-without-switchnet-tabs + @sticky-top-height-common + @page-header-h-without-tabs;
// value of `@sticky-top-height` is 250px
@sticky-top-height: @sticky-top-height-common + @page-header-h;

/* pt + height + pb */
@sticky-footer-textarea: 16px + 16px + 16px;
@sticky-btn-height: 60px;
@sticky-btn-bottom-offset: 40px;
// value of `@sticky-footer-height` is 148px
@sticky-footer-height: @sticky-footer-textarea + @sticky-btn-height + @sticky-btn-bottom-offset;

@table-scoller-reserve-w: 4px;
@table-last-cell-pr: @table-scoller-reserve-w;

.approvals-manager-page {
  width: 100vw;
  min-width: @main-w;
  height: 100vh;
  padding-top: @page-pt-without-switchnet-tabs;
  padding-bottom: @sticky-footer-height;
  background: var(--r-neutral-bg2, #1C1F2B);

  .child-has-chromelike-scrollbar();

  &.with-switchnet-tabs {
    padding-top: 0;
    .approvals-manager__header {
      min-height: @page-header-h;
    }
  }
}

.revoke-approval-modal {
  .child-has-chromelike-scrollbar();
  .approval-list {
    .chromelike-scrollbar(0);
  }

  .ant-modal-header,
  .ant-modal-content {
    background: var(--r-neutral-bg2, #F2F4F7);
  }
}

.approvals-manager {
  overflow: hidden;
  height: 100%;
  min-width: @main-w;
  width: @main-w;
  max-width: 1280px;
  // width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &.approvals-manager-desktop {
    min-width: auto;
    width: auto;
    max-width: 1120px;
    padding: 0 20px;
    padding-top:18px;

    .approvals-manager__table-tools {
      width: auto;
    }
    .am-virtual-table {
      border:1px solid var(--r-neutral-line, #e0e5ec);
      border-radius: 8px;
    }
    .am-virtual-table-empty.ant-empty {
      margin-top: 0;
    }
  }

  > .approvals-manager__header {
    flex-shrink: 0;
  }

  > main {
    flex-shrink: 1;
    height: 100%;
  }
}

.approvals-manager__header {
  min-height: @page-header-h-without-tabs;
  box-sizing: content-box;
  padding-bottom: @page-header-bottom-offset;
  display: block;
  width: 100%;
  text-align: center;
  width: @main-w;
  margin: 0 auto;
  font-size: 20px;
  font-weight: 500;

  > .tabs {
    height: @page-header__tabs-h;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  > .title {
    height: 100%;
    max-height: @page-header__title-h;
    text-align: center;
    color: var(--r-neutral-title1);
    vertical-align: baseline;
    display: inline-block;
  }
}

.approvals-manager__table-tools {
  width: @main-w;
  margin: 0 auto;
  height: @tools-h;
  display: flex;
  align-items: center;
  justify-content: space-between;

   .search-input-wrapper {
    height: @tools-h;
    background-color: var(--r-neutral-card1);
    border-radius: @radius-value;
    overflow: hidden;
    border: 1px solid var(--r-neutral-line);
    transition: ease-in 0.2s border-color;

    .ant-input-affix-wrapper.search-input, .ant-input {
      background-color: transparent;
      color: var(--r-neutral-title1);
      &::placeholder {
        color: var(--r-neutral-foot);
      }
    }

    &.is-focusing, &:hover {
      border-color: var(--r-blue-default, #7084ff);
      border-width: 1px;
    }
  }

  .search-input {
    height: 100%;
    width: 380px;
    border-width: 0;
    border-color: transparent !important;
  }

  .search-input .ant-input-prefix {
    margin-right: 12px;
  }
}

.approvals-manager__table-wrapper {
  margin-top: @table-mt;
}

.am-virtual-table {
  max-width: @main-w;
  margin: 0 auto;



  .ant-spin-nested-loading {
    border-radius: @radius-value;
    overflow: hidden;
  }

  .ant-spin-container.ant-spin-blur::after {
    background-color: var(--r-neutral-bg-1, #fff);
  }

  .ant-table {
    background: transparent;
  }

  &.ant-table-empty .ant-table-container {
    overflow: hidden;
    border-radius: @radius-value;
    background-color: var(--r-neutral-card1);
  }

  .ant-table-header {
    border-radius: @radius-value;
    // background-color: var(--r-neutral-card1);
  }

  .ant-table-header, .ant-table-header > table {
    height: @table-header-h;
  }

  thead.ant-table-thead > tr > th.am-virtual-table-head-cell {
    /**
      we need fix the vertical expansion value from <th> element
      */
    padding: 0;

    background-color: transparent;
    font-size: 13px;
    user-select: none;
    border-bottom: transparent;
    background-color: var(--r-neutral-card1);
    background: var(--r-neutral-card1);
    color: var(--r-neutral-title1);

    // override default head cell style
    // &.ant-table-column-has-sorters:hover {
    //   background-color: transparent;
    // }
    // ant-table-column-sort means current sorter
    &.ant-table-column-has-sorters.ant-table-column-sort {
      // background: transparent;

      .ant-table-column-sorters {
        color: var(--r-blue-default, #7084ff);
      }
    }

    &.ant-table-cell-scrollbar:last-child {
      box-shadow: none;
      width: 0;
      // display: none;
    }

    .ant-table-column-sorters {
      padding: 0;
    }

    .ant-table-column-sorters-with-tooltip {
      height: 100%;
      display: flex;
      align-items: center;
    }

    .ant-table-column-sorter-full {
      margin-top: 0;
      position: relative;
      top: -3px;
      margin-left: 2px;
    }
    
    &.J_contracts_last_column {
      padding-right: 14px;
    }
  }

  thead.ant-table-thead > tr {
    border-radius: @radius-value;
  }

  .ant-table-container:before,
  .ant-table-container:after {
    display: none;
  }

  .am-virtual-grid {
    overflow-y: overlay !important;
    overflow-x: hidden !important;

    .chromelike-scrollbar(@table-scoller-reserve-w);

    .am-virtual-table-cell-inner {
      cursor: pointer;
    }
  }

  .am-virtual-table-cell {
    @table-body-row-gap: 8px;
    @cell-padding-y: @table-body-row-gap;

    background: transparent;
    padding-left: 0;
    padding-right: 0;
    padding-top: @cell-padding-y;

    &.J_selection .am-virtual-table-cell-inner {
      padding-top: 0;
      padding-bottom: 0;
      height: 100%;
    }

    &.is-first-cell > .am-virtual-table-cell-inner {
      border-left: 1px solid transparent;
      border-top-left-radius: @radius-value;
      border-bottom-left-radius: @radius-value;
    }

    &.is-last-cell > .am-virtual-table-cell-inner {
      border-right: 1px solid transparent;
      border-top-right-radius: @radius-value;
      border-bottom-right-radius: @radius-value;

      padding-right: @table-last-cell-pr;
    }

    &.is-sorting-cell > .am-virtual-table-cell-inner {
      font-weight: 500;
    }

    &.is-hovered-row-cell {
      .am-virtual-table-cell-inner {
        border-top: 1px solid var(--r-blue-default, #7084ff);
        border-bottom: 1px solid var(--r-blue-default, #7084ff);
        background: rgba(134, 151, 255, 0.10);
      }

      &.is-first-cell > .am-virtual-table-cell-inner {
        border-left: 1px solid var(--r-blue-default, #7084ff);
        border-top-left-radius: @radius-value;
        border-bottom-left-radius: @radius-value;
      }

      &.is-last-cell > .am-virtual-table-cell-inner {
        border-right: 1px solid var(--r-blue-default, #7084ff);
        border-top-right-radius: @radius-value;
        border-bottom-right-radius: @radius-value;
      }
    }

    &.is-selected-row-cell {
      .am-virtual-table-cell-inner {
        border-top: 1px solid var(--r-blue-default, #7084ff);
        border-bottom: 1px solid var(--r-blue-default, #7084ff);
        background: var(--r-blue-light1, #eef1ff);
      }

      &.is-first-cell > .am-virtual-table-cell-inner {
        border-left: 1px solid var(--r-blue-default, #7084ff);
        border-top-left-radius: @radius-value;
        border-bottom-left-radius: @radius-value;
      }

      &.is-last-cell > .am-virtual-table-cell-inner {
        border-right: 1px solid var(--r-blue-default, #7084ff);
        border-top-right-radius: @radius-value;
        border-bottom-right-radius: @radius-value;
      }
    }
  }

  &:not(.dark) .am-virtual-table-cell.is-contract-row__risky > .am-virtual-table-cell-inner,
  &:not(.dark) .am-virtual-table-cell.is-contract-row__danger > .am-virtual-table-cell-inner {
    background: #fefafa;
  }
  & .am-virtual-table-cell.is-contract-row__risky > .am-virtual-table-cell-inner,
  & .am-virtual-table-cell.is-contract-row__danger > .am-virtual-table-cell-inner {
    background: #3d3b46;
  }

  &:not(.dark) .am-virtual-table-cell.is-contract-row__warning > .am-virtual-table-cell-inner {
    background: #fffdf8;
  }
  &.dark .am-virtual-table-cell.is-contract-row__warning > .am-virtual-table-cell-inner {
    background: #3d3b46;
  }

  &.J_table_by_contracts .am-virtual-table-cell {
    &.is-last-cell > .am-virtual-table-cell-inner {
      padding-right: 20px;
    }

    //------------ special column customizations ------------
    &.column-cell-J_key-contract > .am-virtual-table-cell-inner {
      padding-right: 4px;
    }
  }

  &.J_table_by_assets .am-virtual-table-cell {
    //------------ special column customizations ------------
    &.column-cell-J_key-approveSpender > .am-virtual-table-cell-inner {
      padding-right: 4px;
    }
    
    &.column-cell-J_key-approveSpender > .am-virtual-table-cell-inner .name-and-address .name {
      max-width: 50px;
    }

    &.column-cell-J_key-assetApproveTime > .am-virtual-table-cell-inner {
      padding-left: 20px;
    }
  }

  .am-virtual-table-cell-inner {
    box-sizing: border-box;
    padding: 16px 0;
    background: var(--r-neutral-card1);
    color: var(--r-neutral-title1);
    height: 100%;
    display: flex;
    align-items: center;
  }

  [data-theme="dark"]  .am-virtual-table-cell-inner {
    background: #141414;
  }

  .am-virtual-table-cell-inner .name-and-address {
    &, .address {
      color: var(--r-neutral-title1);
    }

    .contract-name {
      color: var(--r-neutral-body);
      max-width: 10em;
      .ellipsis();
    }
  }

  .am-virtual-table-cell-inner .token-with-chain + .asset-name {
    max-width: 10em;
    .ellipsis();
  } 
}

.am-virtual-table-empty {
  @mt-offset: 12px;

  height: 320px + @mt-offset;
  margin: 0;
  margin-top: -@mt-offset;
  width: 100%;

  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  border-bottom-left-radius: @radius-value;
  border-bottom-right-radius: @radius-value;

  background: transparent;

  &.ant-empty {
    margin-top: @mt-offset;
    background-color: var(--r-neutral-card1);
    border-radius: @radius-value;
  }

  .ant-empty-image {
    height: initial;
    margin-bottom: 10px;

    > img {
      width: 52px;
      height: 52px;
    }
  }

  .ant-empty-description {
    margin-top: 0;
    border-bottom-left-radius: @mt-offset;
    border-bottom-right-radius: @mt-offset;
    color: var(--r-neutral-body);
    text-align: center;
    font-size: 14px;
    font-weight: 400;
  }
}

.approvals-manager .alert-with-caret {
  position: relative;

  &:before {
    content: " ";
    position: absolute;
    top: -16px;
    left: 68px;
    border: 8px solid transparent;
    border-bottom: 12px solid #ec5151;
  }

  &.J_risky_danger &::before {
    border-bottom-color: #ec5151;
  }

  &.J_risky_warning &::before {
    border-bottom-color: @color-orange;
  }
}

.J-risk-cell__text {
  position: relative;
  display: inline-block;
  font-weight: 500;

  &::before {
    display: block;
    content: " ";
    top: 2px;
    left: 0;
    position: absolute;
    width: 100%;
    bottom: 0px;
    border-bottom: 1px dashed transparent;
  }

  &.is-warning {
    color: #ffb020;
    &::before {
      display: block;
      border-bottom-color: #ffb020;
    }
  }
  &.is-danger {
    color: #ec5151;
    &::before {
      display: block;
      border-bottom-color: #ec5151;
    }
  }
}

.J-risk-cell__tooltip,
.J-table__tooltip,
.J_permit2-tooltip {
  color: #fff;
  font-size: 12px;
  font-weight: 400;

  .ant-tooltip-inner {
    line-height: 18px;
    border-radius: 2px;
    background-color: var(--r-neutral-black);

    p {
      margin-bottom: 0;
    }
  }

  &.tip-column-contract-trust-value .ant-tooltip-inner {
    width: 350px;
  }
}

.J_permit2-tooltip .ant-tooltip-content {
  width: 370px;
}

.J-modal-item__tooltip.min-width-limit {
  .ant-tooltip-inner {
    word-wrap: normal;
    min-width: 300px;
  }
}

.J-risk-cell__tooltip {
  &.tip-trust-value .ant-tooltip-inner {
    line-height: 20px;
    text-align: center;
  }

  &.is-danger.tip-recent-revokes .ant-tooltip-inner {
    min-width: 460px;
  }
  &.is-warning.tip-recent-revokes .ant-tooltip-inner {
    min-width: 460px;
  }
}

.J_selected_count_text {
  color: var(--r-blue-default, #7084ff);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.sticky-footer {
  text-align: center;
  position: absolute;
  height: @sticky-footer-height;
  bottom: 0;
  padding-bottom: @sticky-btn-bottom-offset;
}

.modal-debug-row-item {
  .child-has-chromelike-scrollbar(6px);
}

.am-revoke-btn.ant-btn-primary[disabled] {
  .light-style-disabled-btn();
}

.contract-approval-item .token-approval-item-desc {
  &, .address {
    color: var(--r-neutral-title1);
  }

  .contract-name {
    color: var(--r-neutral-body);
    max-width: 10em;
    .ellipsis();
  }
}

.am-revoke-info-modal {
  .ant-modal-content {
    width: 400px;
    height: 232px;
  }

  .ant-modal-body {
    height: 100%;
    padding-top: 40px;
    padding-bottom: 32px;
    padding-left: 0;
    padding-right: 0;
  }

  .ant-modal-confirm-title {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ant-modal-confirm-content {
    margin-top: 0;
    padding: 16px 20px 40px;
  }

  .ant-modal-confirm-btns {
    padding: 0 40px;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ant-modal-close-x {
    width: 44px;
    height: 44px;
  }
}
